// components/slide-view-demo/slide-view-demo.js
const _windowWidth = wx.getSystemInfoSync().windowWidth;
Component({
    /**
     * 组件的属性列表
     *
     */
    options: {
        multipleSlots: true,
    },
    properties: {
        // 组件显示区域宽度
        width: {
            type: Number,
            value: _windowWidth,
        },
        // 组件显示区域的高度
        height: {
            type: Number,
            value: 0,
        },
        // 组件滑动显示区域的宽度
        slideWidth: {
            type: Number,
            value: 0,
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        viewWidth: _windowWidth,
        // movable-view 偏移量
        x: 0,
        // movable-view是否可以出界
        out: false,
    },

    ready() {
        this.updateRight();
    },

    /**
     * 组件的方法列表
     */
    methods: {
        updateRight() {
            const that = this;
            const query = wx.createSelectorQuery().in(this);
            query
                .select(".right")
                .boundingClientRect(function(res) {
                    console.log(res.width);
                    that._slideWidth = res.width;
                    that._threshold = res.width / 2;
                    that._viewWidth = that.data.width + res.width * (750 / _windowWidth);
                    that.setData({
                        viewWidth: that._viewWidth,
                    });
                })
                .exec();
        },
        onTouchstart(e) {
            this._startX = e.changedTouches[0].pageX;
        },
        onTouchEnd(e) {
            this._endX = e.changedTouches[0].pageX;
            const { _endX, _startX, _threshold } = this;
            if (_endX > _startX && this.data.x === 0) return;
            if (_startX - _endX >= _threshold) {
                this.setData({
                    x: -this._slideWidth,
                });
            } else if (_startX - _endX < _threshold && _startX - _endX > 0) {
                this.setData({
                    x: 0,
                });
            } else if (_endX - _startX >= _threshold) {
                this.setData({
                    x: 0,
                });
            } else if (_endX - _startX < _threshold && _endX - _startX > 0) {
                this.setData({
                    x: -this._slideWidth,
                });
            }
        },
    },
});